<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>ELM导航栏</title>
    <link rel="stylesheet" href="./node_modules/layui-src/dist/css/layui.css">
    <style>
        .tiao{
            height: 30px;
            background-color: #2B2E37;
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="root">
        <top1></top1>
        <late></late>
    </div>
    <!--左侧导航-->
    <template id="late">
    <div>
        <ul class="layui-nav layui-nav-tree layui-inline" lay-filter="demo" style="margin-right: 10px;">
            <li class="layui-nav-item layui-nav-itemed">
                <a href="javascript:;" @click="d1" :class="{title :true}">数据管理</a>
                <dl class="layui-nav-child">
                    <p @click="d10('用户列表')"><a href="###">用户列表</a></p>
                    <p @click="d10('商家列表')"><a href="###">商家列表</a></p>
                    <p @click="d10('食品列表')"><a href="###">食品列表</a></p>
                </dl>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:;">添加信息</a>
                <dl class="layui-nav-child">
                    <p @click="d20('添加店铺')"> <a href="###">添加店铺</a> </p>
                    <p @click="d20('添加食品')"> <a href="###">添加食品</a></p>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="">云市场</a></li>
            <li class="layui-nav-item"><a href="">社区</a></li>
        </ul>
    </div>
</template>
    <!--顶部-->
    <template id="top1">
    <div class="tiao">
        <span class="layui-breadcrumb" lay-separator="  ">
            <a href="">{{head}}</a>       
        </span>
    </div>
</template>
</body>

</html>
<script src="node_modules/layui-src/src/layui.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    layui.use('element', function() {
        var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块

        //监听导航点击
        element.on('nav(demo)', function(elem) {
            //console.log(elem)
            // layer.msg(elem.text());
        });
    });
    let event = new Vue({});
    let late = {
        template: "#late",
        data: function() {
            return {
                D1: true,
                D2: true,
            }
        },
        methods: {
            d10(a) {
                event.$emit("info2", "数据管理", a);
            },

            d20(a) {
                event.$emit("info2", "添加数据", a);
            },
        },
    };
    //顶部组件
    let top1 = {
            template: "#top1",
            data: function() {
                return {
                    one: "首页",
                    two: "",
                    three: "",
                }
            },
            //    监听事件
            created: function() {

                event.$on("info2", (b, a) => {
                    this.three = a;
                    this.two = b;
                })
            },
            computed: {
                head: {
                    get: function() {
                        return this.one + "  " + this.two + "  " + this.three
                    }
                }
            }
        }
        //Vue组件
    let root = new Vue({
        el: "#root",
        data: {
            // title:'title'
        },
        //    函数
        methods: {},
        //    组件
        components: {
            late,
            top1,
        },
        //    计算属性
        computed: {

        },

    })
</script>